<!--  -->
<template>
  <div class>
    <Head></Head>
    <titlemeta></titlemeta>
    <div class="navContent">
      <div class="navContent_env">
        <VueEditor
          style="width: 100%"
          v-model="data"
          :editorToolbar="customToolbar"
          :disabled="true"
        ></VueEditor>
      </div>
      <div class="nextPud">
        <div v-if="previousdis" @click="getpreviousdis">
          <Icon type="md-arrow-round-back" />
          上一篇 {{previous.problemInfoName}}
        </div>
        <div v-if="articledis" @click="getarticledis" class="articledisRignt">
          {{article.problemInfoName}} 下一篇
          <Icon type="md-arrow-round-forward" />
        </div>
      </div>
    </div>

    <Foot></Foot>
    <lefINvitation class="leftNvit"></lefINvitation>
    <nightNvitation class="nightNvit" v-if="!mobilePc"></nightNvitation>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import { problemInfo, findPrevAndNextProblemInfo } from "../../api/info";
import { VueEditor } from "vue2-editor";
import titlemeta from "../../components/titlemeta";
import {clieentWidth} from '../../utils/clientwidth'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation,
    VueEditor,
    titlemeta
  },
  data() {
    //这里存放数据
    return {
      previous: "", //上一篇
      article: "", //下
        mobilePc:false,
      previousdis: false,
      articledis: false,
      id: "",
      data: "",
      customToolbar: [
        [{ font: [] }],
        [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video", "formula"],
        [{ direction: "rtl" }],
        ["clean"]
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route(to, from) {
      this.$router.go(0);
    }
  },
  //方法集合
  methods: {
    getfindPrevAndNextProblemInfo() {
      findPrevAndNextProblemInfo(this.id).then(res => {
        if (res.code == "0000") {
          if (res.data.prev != null) {
            this.previous = res.data.prev;
            this.previousdis = true;
          } else {
            this.previousdis = false;
          }
          if (res.data.next != null) {
            this.article = res.data.next;
            this.articledis = true;
          } else {
            this.articledis = false;
          }
        }
      });
    },
    getpreviousdis() {
      this.$router.push({ path: "/problem", query: { id: this.previous.id } });
    },
    // 下一篇
    getarticledis() {
      this.$router.push({ path: "/problem", query: { id: this.article.id } });
    },
    getproblemInfo() {
      problemInfo(this.id).then(res => {
        if (res.code == "0000") {
          this.data = res.data.problemInfoAnswer;
        }
      });
    },
             ismobilePc(){
      if(clieentWidth()){
        this.mobilePc = true
      }else{
        this.mobilePc = false
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.query.id;
    this.getproblemInfo();
    this.getfindPrevAndNextProblemInfo();
    this.ismobilePc()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
//@import url(); 引入公共css类
.navContent {
  width: 67%;
  border: 1px solid rgba(54, 54, 54, 0.137);
  padding: 0.2rem 0;
  margin: 0.4rem auto;
  //   text-align: center;
}
.navContent_env {
  margin: auto;
  text-align: center;
}

/deep/.quillWrapper .ql-snow.ql-toolbar {
  display: none;
}
/deep/.ql-container.ql-snow {
  border: 0;
  /* border-top:1px solid #ccc; */
}
.nextPud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.16rem;
}
.nextPud > div {
  padding: 0.1rem 0.1rem;
  cursor: pointer;
}
.articledisRignt{
    text-align: right;
}
@media screen and (max-width: 780px){
    .nextPud {
   display: block;
  font-size: 1rem;
}
}
</style>